<template>
  <div class="cardData paymentUser">
    <div class="breadcrumbNav">
      <!--<crumbList :navList="navList"></crumbList>-->
      <el-select v-model="searchData.cityCode" filterable placeholder="请选择城市" @change="topCalendarsChange">
        <el-option v-for="item in cityCodeList" :label="item.moduleName" :value="item.modulePath" :key="item.modulePath"></el-option>
      </el-select>
      <i class="fa fa-refresh" aria-hidden="true" @click="reload" title="刷新"></i>
    </div>
    <div class="card-data-title">
      <ul>
        <li v-for="(item, index) in topTotal" :key="index" class="remain-user-title-item">
          <div class="top">
            <i :class="item.titleIcon"></i><span class="headerFont">{{item.title}}</span>
          </div>
          <div class="middle">
            {{item.content}}
          </div>
          <div class="botBox">
            <i v-if="item.up" class="fa fa-caret-up" :class="{red: item.up, green: !item.up}"></i><i v-else class="fa fa-caret-down" :class="{red: item.up, green: !item.up}"></i><span class="percent" :class="{red: item.up, green: !item.up}">{{item.percent}}</span><span class="bottomFont">{{item.bottomFont}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="card-data-line">
      <div class="search">
        <div class="left">
          <el-radio-group v-model="searchData.paymentType">
            <el-radio-button label="0">全部</el-radio-button>
            <el-radio-button label="1">支付宝</el-radio-button>
            <el-radio-button label="2">微信</el-radio-button>
            <el-radio-button label="3">其他商户</el-radio-button>
          </el-radio-group>
        </div>
        <div class="right">
          <el-radio-group v-model="searchData.calendars">
            <el-radio-button label="1">昨日</el-radio-button>
            <el-radio-button label="2">上周</el-radio-button>
            <el-radio-button label="3">上月</el-radio-button>
          </el-radio-group>
          <el-date-picker  v-model="dateTimeScope"  type="daterange"  placeholder="请选择时间范围" align="right" @input="dateScopeChange"></el-date-picker>
          <el-button class="searchBtn" @click="getCardData">查询</el-button>
        </div>
      </div>
      <div class="line" v-loading="remainUserLineLoading" element-loading-text="加载中...">
        <div id="remainUserLine" style="height: 600px"></div>
      </div>
    </div>
    <div class="card-data-table">
      <div class="export">
        <a href="javascript:void(0)" target="_blank"><el-button type="primary" class="exportBtn" @click="exportExcelHandler">导出</el-button></a>
      </div>
      <myTable :table="table" :tableData="tableData"></myTable>
      <div class="block">
        <el-pagination layout="total, prev, pager, next, jumper"
                       @current-change="handleCurrentChange"
                       :current-page="page.pageNum"
                       :page-size="page.pageSize"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  import crumbList from '../../common/crumbList.vue'
  import myTable from '../../common/myTable.vue'
  import setDate from '../../../../utils/setDate'
  import cardData from '../../../../utils/getCardTotal'
  import api from '../../../../api/index'
  import ajax from '../../../../utils/ajax'
  import handleChartData from './js/handleChartData'
  export default {
    components: {crumbList, myTable},
    data () {
      return {
        navList: [
          {name: '用户分析', path: ''},
          {name: '用户留存', path: ''}
        ],
        topTotal: '',
        searchData: {
          cityCode: '420100', // 城市选择
          paymentType: '0',
          calendars: '1',
          startTime: '',
          endTime: ''
        },
        dateTimeScope: '', // 时间范围
        remainUserLineLoading: false
      }
    },
    computed: {
      ...mapState('moduleItem', [
        'cityCode',
        'cityCodeList', // 城市编码
        'table',
        'tableData',
        'tableDataTotal',
        'page'
      ])
    },
    mounted () {
      this.searchData.cityCode = this.cityCode
      this.getTopTotal({url: api.remainUserData.total, params: {cityCode: this.searchData.cityCode}})
      this.getCardData()
    },
    methods: {
      ...mapActions('moduleItem', ['setCityCode', 'setPage', 'setTableData', 'setTableDataTotal', 'setTable']),
      getTopTotal (obj) { // 顶部汇总
        let that = this
        ajax.get(obj.url, obj.params).then((res) => {
          let data = res.data.remainUserDtoList
          that.topTotal = that.$formatNumber(data) // 数字加千分位
        })
      },
      dateScopeChange (val) {
        this.searchData.startTime = setDate(val[0])
        this.searchData.endTime = setDate(val[1])
      },
      handleCurrentChange (val) {
        let that = this
        that.setPage({pageNum: val, pageSize: 10, total: that.tableDataTotal.length})
        let tableData = []
        let arrlen = val * that.page.pageSize <= that.tableDataTotal.length ? that.page.pageSize : that.tableDataTotal.length - that.page.pageSize * (val - 1)
        for (let i = 0; i < arrlen; i++) {
          let temp = i + that.page.pageSize * (val - 1)
          tableData.push(that.tableDataTotal[temp])
        }
        that.setTableData(tableData)
      },
      reload () {
        window.location.reload()
      },
      topCalendarsChange () {
        this.setCityCode(this.searchData.cityCode)
        this.getTopTotal({url: api.remainUserData.total, params: {cityCode: this.searchData.cityCode}})
        this.getCardData()
      },
      getCardData () {
        let that = this
        that.remainUserLineLoading = true
        ajax.get(api.remainUserData.result, that.searchData).then((res) => {
          let code = res.msg.code
          if (code === '20000') {
            let data = res.data.tUserKeepAnalysisList
            let headerData = res.data.tableHeaders
            that.setTableDataTotal(data)
            that.setTable(headerData)
            that.handleCurrentChange(1)
            let {legendData, xAxisData, seriesData} = handleChartData(headerData, data)
            cardData(false, legendData, xAxisData, seriesData, 'remainUserLine')
          } else {
            this.$message({type: 'error', message: res.msg.message})
          }
          that.remainUserLineLoading = false
        }).catch((err) => {
          if (err) throw err
          that.remainUserLineLoading = false
        })
      },
      exportExcelHandler () { // 导出excel
        let url = api.remainUserData.export
        let params = this.searchData
        this.$exportExcel(url, params)
      }
    }
  }
</script>
